<template>
    <div class="w-full shadow box-border py-10px px-20px rounded-10px border-solid">
        <div class="w-full flex items-center gap-20px item-header">
            <n-avatar round :size="48"></n-avatar>
            <div class="h-full flex-col justify-center">
                <div class="font-size-1.1rem">
                    {{ moment.username }}
                </div>
                <div class="font-size-0.8rem opacity-80">
                    {{ new Date(moment.updateTime).toLocaleString() }}
                </div>
            </div>
            <XIcon
                v-if="visibleTo === 'mine'"
                name="delete"
                class="ml-auto hidden delete-btn cursor-pointer"
                @click="handleDelete"
            ></XIcon>
        </div>
        <div class="w-full my-10px">{{ moment.content }}</div>
        <div class="w-full flex justify-between pt-10px" style="border-top: 1px solid #e5e5e5">
            <div class="flex-center opacity-80 font-size-0.7rem">
                发布于
                <RegionText v-model="moment.location" separator="-"></RegionText>
            </div>
            <div class="h-full flex-center gap-16px">
                <div class="flex-col items-center" @click="handleLike">
                    <n-button text>
                        <XIcon name="like" :size="24" />
                    </n-button>
                    <div class="font-size-0.7rem opacity-80">{{ moment.likeCount }}</div>
                </div>

                <div class="flex-col items-center" @click="handleShowComment">
                    <n-button text>
                        <XIcon name="comment" :size="24" />
                    </n-button>
                    <div class="font-size-0.7rem opacity-80">
                        {{ commentsVisable ? '收起' : '展开' }}
                    </div>
                </div>
            </div>
        </div>
        <div
            class="w-full duration-300 ease overflow-hidden grid"
            :style="{ gridTemplateRows: commentsVisable ? '1fr' : '0fr' }"
        >
            <!-- 评论列表 -->
            <div class="w-full min-h-0">
                <div class="w-full flex-center" v-if="comments.length === 0">
                    <n-empty description="抢沙发~" size="small" />
                </div>
                <template v-else>
                    <div
                        v-for="comment in comments"
                        :key="comment.id"
                        class="w-full flex gap-10px font-size-0.78rem opacity-80"
                    >
                        <div class="shrink-0">{{ comment.userinfo.username }}:</div>
                        <div>{{ comment.content }}</div>
                    </div>
                </template>

                <div class="w-full flex-center mt-10px gap-10px">
                    <input
                        v-model="comment"
                        class="border-solid box-border p-10px w-full font-size-0.78rem h-22px"
                        style="border-bottom: solid 1px #e5e5e5"
                        placeholder="来说点什么吧~"
                    />
                    <n-button size="tiny" :focusable="false" @click="handleComment">评论</n-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { MomentVo } from '@/service/types/moment'
import type { CommentVo } from '@/service/types/comment'

import { RegionText } from 'v-region'
import XIcon from '@/components/xicon/index.vue'

import { createComment, getCommentList } from '@/service/api/comment'

const props = defineProps<{
    moment: MomentVo
    visibleTo: 'mine' | 'all'
}>()

const emits = defineEmits<{
    like: [string]
    delete: [string]
}>()

const commentsVisable = ref(false)
const comments = ref<CommentVo[]>([])

const comment = ref('')
const handleComment = async () => {
    if (!comment.value.trim()) {
        window.NMessage.warning('评论内容不能为空')
        return
    }
    try {
        const user = JSON.parse(localStorage.getItem('user') || '{}')
        await createComment({
            momentId: props.moment.id,
            commenterId: user.id,
            content: comment.value,
        })
        comments.value.push({
            id: '',
            momentId: props.moment.id,
            commenterId: user.id,
            content: comment.value,
            createTime: new Date().getTime(),
            userinfo: user,
        })

        comment.value = ''
    } catch (err) {
        console.log(err)
        window.NMessage.error('评论失败')
    }
}

const handleDelete = () => {
    window.NDialog.warning({
        title: '确认删除',
        content: '确定要删除该动态吗？',
        closeable: false,
        positiveText: '确认',
        negativeText: '取消',
        onPositiveClick: () => {
            emits('delete', props.moment.id)
        },
    })
}

const handleLike = () => {
    emits('like', props.moment.id)
}

const handleShowComment = async () => {
    commentsVisable.value = !commentsVisable.value
    if (!comments.value.length) {
        try {
            const res = await getCommentList({
                momentId: props.moment.id,
                page: 1,
                size: 20,
            })
            comments.value = res
        } catch (err: any) {
            window.NMessage.error('获取评论失败')
        }
    }
}
</script>

<style scoped>
input {
    outline: none;
}

.item-header:hover .delete-btn {
    display: block;
}
</style>
